<template>
  <div class="success-container">
    <!-- 成功状态 -->
    <el-result
      icon="success"
      title="简历已生成"
      sub-title="您的简历已成功生成，请选择以下操作"
    >
      <!-- 操作按钮 -->
      <template #extra>
        <el-button 
          type="primary" 
          size="large"
          @click="downloadPDF"
        >下载PDF</el-button>

        <el-button 
          type="info" 
          size="large"
          @click="shareLink"
        >分享链接</el-button>
      </template>
    </el-result>

    <!-- 分享链接弹窗 -->
    <el-dialog
      v-model="showShareDialog"
      title="分享简历"
      width="400px"
    >
      <div class="share-content">
        <!-- 二维码 -->
        <div class="qrcode">
          <img :src="qrcodeUrl" alt="简历分享二维码">
        </div>

        <!-- 链接 -->
        <el-input
          v-model="shareUrl"
          readonly
        >
          <template #append>
            <el-button @click="copyLink">复制</el-button>
          </template>
        </el-input>
      </div>

      <!-- 安全提示 -->
      <div class="security-tip">
        <el-alert
          title="链接将在24小时后失效"
          type="warning"
          :closable="false"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 分享相关状态
const showShareDialog = ref(false)
const shareUrl = ref('https://resume.example.com/123456')
const qrcodeUrl = ref('https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://resume.example.com/123456')

// 下载PDF
const downloadPDF = () => {
  // TODO: 实现PDF下载逻辑
}

// 分享链接
const shareLink = () => {
  showShareDialog.value = true
}

// 复制链接
const copyLink = () => {
  navigator.clipboard.writeText(shareUrl.value)
  ElMessage.success('链接已复制')
}
</script>

<style scoped>
.success-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.share-content {
  text-align: center;
}

.qrcode {
  margin: 20px 0;
}

.qrcode img {
  width: 150px;
  height: 150px;
}

.security-tip {
  margin-top: 20px;
}
</style>
